<template>
  <div>
x轴：{{mouse.x}}=={{x}}
<br>
y轴：{{mouse.y}}=={{y}}
  </div>
</template>

<script>
import {reactive,toRefs,onMounted}  from 'vue'
export default {
  setup () {
    /* 1-定义数据 */
    const mouse=reactive({
      x:0,
      y:0
    })
    /* 2-监听鼠标移动事件 */
    // dom.onmousemove=function name(params) {
      
    // }
    var newMouse=toRefs(mouse)
    onMounted(()=>{
      window.addEventListener('mousemove',(e)=>{
        // console.log(e.screenX,e.screenY,'===screen');
        // console.log(e.clientX,e.clientY,'===client');
        // console.log(e.pageX,e.pageY,'====page');
        // mouse.x=e.pageX
        // mouse.y=e.pageY
        newMouse.x.value=e.pageX
        newMouse.y.value=e.pageY
      })
    })
    return {mouse,...newMouse}
  }
}
</script>

<style lang="scss" scoped>

</style>